<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="keywords">
    <meta content="" name="description">
    <link href="favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link rel="stylesheet" th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/animate.css}"/>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" th:href="@{/ruoyi/css/ry-ui.css}"/>
    <link rel="stylesheet" th:href="@{/css/my.css}"/>

    <!--页面样式文件-->
    <link rel="stylesheet" th:href="@{/dist/css/main.css}">
    <link rel="stylesheet" th:href="@{/dist/css/media.css}">
</head>

<body class="bd-bg">
<!--右侧主体-->

<div class="standard02-contentPart">
    <div class="standard02-main">
        <!--搜索区域-->
        <div class="row rowNew">
            <div class="col-sm-12 search-area">
                <form id="formId">
                    <div class="select-list">
                        <ul class="ulForm clearfix">
                            <li class="select-time">
                                <label>选择时间： </label>
                                <div class="fl inputTime-outer">
                                    <input class="time-input" id="beginTime" name="params[beginTime]" placeholder="开始时间"
                                           th:value="${beginTime}"
                                           type="text"/>
                                    <div class="icon-rili"></div>
                                </div>
                                <span>-</span>
                                <div class="fl inputTime-outer">
                                    <input class="time-input" id="endTime" name="params[endTime]" placeholder="结束时间"
                                           th:value="${endTime}"
                                           type="text"/>
                                    <div class="icon-rili"></div>
                                </div>
                                <div class="btn-outer fl">
                                    <a class="btn btn-primary" style="margin-left: 24px;" onclick="reloadIt()">搜索</a>
                                </div>
                            </li>
                            <li class="btn-group">
                                <a class="thisYear btn btn-primary mlr_8">本年</a>
                                <a class="thisMonth btn btn-primary mlr_8">本月</a>
                                <a class="thisDay btn btn-primary mlr_8">本日</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>
        <!--统计区域-->
        <div class="row rowNew">
            <div class="statistics-area02">
                <div class="statistics-list clearfix" id="standardTitle">
                    <div class="statistics-item col-xs-4 col-sm-4">
                        <div class="main color01 active">
                            <div class="indro">
                                <i class="icon"><img alt=""
                                                     th:src="@{/dist/img/standard-totalIcon.png}"></i><span>合计标准</span>
                            </div>
                            <div class="num">
                                <span th:text="${statusCount.total}">30</span>
                                <span class="unit">个</span>
                            </div>
                            <div class="percent">占比100%</div>
                        </div>
                    </div>
                    <div class="statistics-item col-xs-4 col-sm-4">
                        <div class="main color02">
                            <div class="indro">育苗标准</div>
                            <div class="num" th:text="${statusCount.type1Size}">1000</div>
                            <div class="percent" th:text="'占比' + ${statusCount.type1Precent}+ '%'">占比50%</div>
                        </div>
                    </div>
                    <div class="statistics-item col-xs-4 col-sm-4">
                        <div class="main color03">
                            <div class="indro">生产标准</div>
                            <div class="num" th:text="${statusCount.type2Size}">1000</div>
                            <div class="percent" th:text="'占比' + ${statusCount.type2Precent}+ '%'">占比50%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-list" style="margin-top: -10px;">
            <!--合计标准-->
            <div class="row rowNew tab-content active">
                <div class="main clearfix">
                    <!--育苗标准-->
                    <div class="tabC-item col-md-6">
                        <div class="row rowNew" style="margin: 0">
                            <div class="title col-lg-12 col-md-12 col-sm-12" standardType="1"
                                 onclick="detailInfo2(this)">
                                <i class="icon"><img alt="" th:src="@{/dist/img/standard-icon01.png}"></i><span
                                    class="txt">育苗标准</span>
                            </div>
                        </div>
                        <div class="row rowNew list">

                            <div class="item col-sm-12 col-lg-6" th:each="class:${caiClass1}">
                                <div class="item-box">
                                    <div class="item-box-1" standardType="1" th:attr="caiId = *{class.caiId}"
                                         onclick="detailInfo(this)">
                                        <div class="left">
                                            <img alt="" th:src="@{/dist/img/juShan-plan-icon01.jpg}">
                                            <p th:text="${class.caiName} + ':'">瓜类</p>
                                            <div><span th:text="${class.planCounts.total}">186</span>个</div>
                                        </div>
                                        <div class="right" th:attr="code = *{class.code}">
                                            <p><span th:text="'占比'+${class.planCounts.total_rate}+'%'">22.22%</span></p>
                                            <div class="record">
                                                <span></span>
                                                <span></span>
                                                <span></span>
                                                <span></span>
                                                <span></span>
                                                <span></span>
                                                <span class="last"
                                                      th:style="'height:'+${class.planCounts.total_rate}*0.5+'px'"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--生产标准-->
                    <div class="tabC-item col-md-6">
                        <div class="row rowNew" style="margin: 0">
                            <div class="title col-lg-12 col-md-12 col-sm-12" standardType="2"
                                 onclick="detailInfo2(this)">
                                <i class="icon"><img alt="" th:src="@{/dist/img/standard-icon02.png}"></i><span
                                    class="txt">生产标准</span>
                            </div>
                        </div>
                        <div class="row rowNew list">


                            <div class="item col-sm-12 col-lg-6" th:each="class:${caiClass2}">
                                <div class="item-box">
                                    <div class="item-box-1" standardType="2" th:attr="caiId = *{class.caiId}"
                                         onclick="detailInfo(this)">
                                        <div class="left">
                                            <img alt="" th:src="@{/dist/img/juShan-plan-icon01.jpg}">
                                            <p th:text="${class.caiName} + ':'">瓜类</p>
                                            <div><span th:text="${class.planCounts.total}">186</span>个</div>
                                        </div>
                                        <div class="right" th:attr="code = *{class.code}">
                                            <p><span th:text="'占比'+${class.planCounts.total_rate}+'%'">22.22%</span></p>
                                            <div class="record">
                                                <span></span>
                                                <span></span>
                                                <span></span>
                                                <span></span>
                                                <span></span>
                                                <span></span>
                                                <span class="last"
                                                      th:style="'height:'+${class.planCounts.total_rate}*0.5+'px'"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--育苗标准-->
            <div class="row rowNew tab-content">
                <div class="main clearfix">
                    <div class="tabC-item col-sm-12">
                        <div class="row rowNew" style="margin: 0">
                            <div class="title col-lg-12 col-md-12 col-sm-12">
                                <i class="icon"><img alt="" th:src="@{/dist/img/standard-icon01.png}"></i><span
                                    class="txt">育苗标准</span>
                            </div>
                        </div>
                        <div class="row rowNew list list02">

                            <div class="item col-sm-6  col-lg-3" th:each="class:${caiClass1}">
                                <div class="item-box">
                                    <div class="item-box-1" standardType="1" th:attr="caiId = *{class.caiId}"
                                         onclick="detailInfo(this)">
                                        <div class="left">
                                            <img alt="" th:src="@{/dist/img/juShan-plan-icon01.jpg}">
                                            <p th:text="${class.caiName} + ':'">瓜类</p>
                                            <div th:text="${class.planCounts.total}"><span>186</span>个</div>
                                        </div>
                                        <div class="right" th:attr="code = *{class.code}">
                                            <p><span th:text="'占比'+${class.planCounts.total_rate}+'%'">22.22%</span></p>
                                            <div class="record">
                                                <span></span>
                                                <span></span>
                                                <span></span>
                                                <span></span>
                                                <span></span>
                                                <span></span>
                                                <span class="last"
                                                      th:style="'height:'+${class.planCounts.total_rate}*0.5+'px'"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--生产标准-->
            <div class="row rowNew tab-content">
                <div class="main clearfix">
                    <div class="tabC-item col-sm-12">
                        <div class="row rowNew" style="margin: 0">
                            <div class="title col-lg-12 col-md-12 col-sm-12">
                                <i class="icon"><img alt="" th:src="@{/dist/img/standard-icon02.png}"></i><span
                                    class="txt">生产标准</span>
                            </div>
                        </div>
                        <div class="row rowNew list list02">

                            <div class="item col-sm-6  col-lg-3" th:each="class:${caiClass2}">
                                <div class="item-box">
                                    <div class="item-box-1" standardType="2" th:attr="caiId = *{class.caiId}"
                                         onclick="detailInfo(this)">
                                        <div class="left">
                                            <img alt="" th:src="@{/dist/img/juShan-plan-icon01.jpg}">
                                            <p th:text="${class.caiName} + ':'">瓜类</p>
                                            <div th:text="${class.planCounts.total}"><span>186</span>个</div>
                                        </div>
                                        <div class="right" th:attr="code = *{class.code}">
                                            <p><span th:text="'占比'+${class.planCounts.total_rate}+'%'">22.22%</span></p>
                                            <div class="record">
                                                <span></span>
                                                <span></span>
                                                <span></span>
                                                <span></span>
                                                <span></span>
                                                <span></span>
                                                <span class="last"
                                                      th:style="'height:'+${class.planCounts.total_rate}*0.5+'px'"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:include="include::footer"></div>
<th:block th:include="include :: select2-js"/>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- 遮罩层 -->
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/js/my-common-js.js}" th:inline="javascript"></script>
<script th:inline="javascript">
    var ctx = [[@{
        /}]]


        layui.use('laydate', function () {
            var laydate = layui.laydate;
            var timestamp = new Date().getTime();
            var timestamp1 = new Date().getTime() + 1000 * 60 * 60 * 24 * 2;
            //执行一个laydate实例
            laydate.render({
                elem: '#test1' //指定元素
                ,
                format: "yyyy-MM-dd",
                value: new Date(timestamp)
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#test2' //指定元素
                ,
                format: 'yyyy-MM',
                value: new Date(timestamp1)
            });
        });

        $(function () {

            //定义颜色数组
            var pic = 'dist/img/juShan-plan-icon0&&.jpg';
            var color = ["#f07849", "#755da5", "#70b012", "#52ddb2", "#0fb282", "#ff5678", "#80465e", "#a5a5a4"];
            var color1 = ["#fef9f9", "#f0eef6", "#f0f7e7", "#ecfcf7", "#e6f7f2", "#feeef1", "#f1ecef", "#f1ecef"];


            var config = {
                v_gua: {color: "#f07849", color1: '#fef9f9', pic: 1},
                v_qie: {color: "#755da5", color1: '#f0eef6', pic: 2},
                v_dou: {color: "#70b012", color1: '#f0f7e7', pic: 3},
                v_ye: {color: "#52ddb2", color1: '#ecfcf7', pic: 4},
                v_xin: {color: "#0fb282", color1: '#e6f7f2', pic: 5},
                v_cong: {color: "#ff5678", color1: '#feeef1', pic: 6},
                v_gen: {color: "#80465e", color1: '#f1ecef', pic: 7},
                v_qi: {color: "#a5a5a4", color1: '#f1ecef', pic: 8},

            }


            $(".item-box .right").each(function (i, ele) {
                var code = $(ele).attr('code')
                $(ele).children("p").css("color", config[code].color)
                var img = $('.item-box .left img')[i];
                $(img).attr('src', ctx + pic.replace('&&', config[code].pic));
                var record = $(ele).children('.record');
                $(record).children("span").css("background-color", config[code].color1)
                $(record).children(".last").css("background-color", config[code].color)

            })


            /*  $('.tabC-item').each(function () {
                  $(this).find(".item-box").each(function (index) {
                      $(this).find('.right').children("p").css("color", color[index])
                  });
                  $(this).find(".record").each(function (i, ele) {
                      $(ele).children("span").css("background-color", color1[i]);
                      $(ele).children(".last").css("background-color", color[i])
                  })
              });*/

            $("#standardTitle .statistics-item").each(function () {
                var index = $(this).index();
                $(this).children(".main").eq(0).click(function () {
                    $(this).addClass("active").parent().siblings().children(".main").removeClass("active");
                    $(".tab-list .tab-content").eq(index).addClass("active").siblings().removeClass("active");
                })
            })
        });


        function reloadIt(type) {
            var link = ctx + "system/ncStandard/showStandard";
            var s = $('#beginTime').val();
            var e = $('#endTime').val();

            link += "?beginTime=" + s + "&endTime=" + e;
            window.location.href = link;
        }

        $('.thisYear').click(function () {
            $('#beginTime').val(new Date().getFullYear() + "-01-01");
            reloadIt();
        });

        $('.thisMonth').click(function () {
            var d = new Date();
            var m = d.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            $('#beginTime').val(new Date().getFullYear() + "-" + m + "-01");
            reloadIt();
        });

        $('.thisDay').click(function () {
            var d = new Date();
            var m = d.getMonth() + 1;
            var day = d.getDate();
            m = m < 10 ? '0' + m : m;
            $('#beginTime').val(new Date().getFullYear() + "-" + m + "-" + day);
            reloadIt();
        });


        /**
         * 根据菜类型查询标准列表
         * */
        function detailInfo(obj) {
            var ancestors = $(obj).attr('caiId');
            var standardType = $(obj).attr('standardType');
            var link = ctx + 'system/ncStandard/frontStandList?ancestors=' + ancestors + '&standardType=' + standardType;
            var s = $('#beginTime').val();
            var e = $('#endTime').val();
            link += "&beginTime=" + s + "&endTime=" + e;
            $.modal.openTab("标准列表", link);
        }


        /**
         * 标准类型查询标准列表(育苗 生产)
         * @param obj
         */
        function detailInfo2(obj) {

            var standardType = $(obj).attr('standardType');
            var link = ctx + 'system/ncStandard/ncStandardFront?standardType=' + standardType;
            var s = $('#beginTime').val();
            var e = $('#endTime').val();
            link += "&beginTime=" + s + "&endTime=" + e;
            $.modal.openTab("标准列表", link);

        }

        setFrontTimeShortcutBtns([[${beginTime}]],[[${endTime}]]);
        setTitle("巨山标准", false);
</script>

</body>

</html>
